<template>
  <div id="app">
    <big-header id="header"></big-header>
    <router-view v-if="isRouterAlive" />
    <big-footer id="footer"></big-footer>
  </div>
</template>
<script>
import bigHeader from "./components/Header";
import bigFooter from "./components/Footer";
export default {
  components: {
    bigHeader,
    bigFooter,
  },
  provide() {
    return {
      reload: this.reload, //把this.reload的方法导出
    };
  },
  data() {
    return {
      isRouterAlive: true, //控制router-view的显示或隐藏的布尔值
    };
  },
  methods: {
    // 先将router-view隐藏，再显示，达到刷新的效果
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>
<style lang="less">
.code {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>


